<template>
  <van-icon
    color="#f0c107"
    :name="isStar ? 'star' : 'star-o'"
    @click="clickBtn"
  />
</template>

<script>
import { starArt, unStarArt } from '@/api/article.js'
export default {
  name: 'StarBtn',
  // 设置 v-model 属性 和 事件名
  model: {
    prop: 'isStar',
    event: 'onChangeStar'
  },
  props: {
    // 收藏状态
    isStar: {
      default: false,
      required: true,
      type: Boolean
    },
    // 目标文章id
    artId: {
      required: true
    }
  },
  data() {
    return {
      loading: false
    }
  },
  methods: {
    // 点击事件处理函数----------------------
    async clickBtn() {
      this.$emit('onChangeStar', !this.isStar)
      // this.loading = true
      if (this.isStar) {
        // 如果 已收藏，则 进行 取消收藏操作
        try {
          await unStarArt(this.artId)
          // 调用 父组件方法，修改 关注状态
          this.$emit('onChangeStar', false)
          this.$toast.success('取消成功~')
        } catch (error) {
          this.$toast.fail('服务器繁忙~~')
        }
      } else {
        // 如果 未关注，则 进行 关注操作
        try {
          // 调用 收藏文章接口
          await starArt(this.artId)
          // 调用 父组件方法，修改 关注状态
          this.$emit('onChangeStar', true)
          this.$toast.success('收藏成功~')
        } catch (error) {
          this.$toast.fail('服务器繁忙~~')
        }
      }
      // this.loading = false
    }
  },
  created() {},
  computed: {},
  watch: {},
  components: {}
}
</script>

<style lang="less" scoped>
</style>
